<template>
  <view class="list">
    <view
      class="item"
      v-for="item of items"
      :key="item.id"
      @click="$emit('handle', 'detail', item)"
    >
      <view class="itemCon">
        <image class="img" :src="item.goods_info.cover_pic" mode="aspectFill" />

        <view class="txt">
          <view class="txtHd">
            <view class="title">
              {{ item.goods_info.name }}
            </view>

            <view class="rig">
              <view class="price">
                <text>￥</text>
                <text>{{ item.total_price | priceBeforeZero }}</text>
                <text>{{ item.total_price | priceAfterZero }}</text>
              </view>

              <view class="num">共1件</view>
            </view>
          </view>

          <view class="attr">{{ getAttrName(item.attr_list) }}</view>
        </view>
      </view>

      <view class="itemFd">
        <view :class="['status', item.status === 1 ? 'disabled' : '']"
          >{{ getStatus(item.status) }}，已砍至￥{{ item.pay_price }}</view
        >
        <view
          class="btn"
          v-if="item.status === 10 && !item.activity_finished"
          @click.stop="$emit('handle', 'buyNow', item)"
        >
          <view>支付订单</view>
        </view>
        <view
          class="btn"
          v-if="parseInt(item.used_order_id) && item.status !== 10"
          @click.stop="$emit('handle', 'buyNow', item)"
        >
          <view>查看订单</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },

    tab: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      price: "90.03",
    };
  },

  computed: {
    getAttrName() {
      return (attr) => {
        if (attr && attr.length) {
          return attr
            .map((el) => el.attr_group_name + ":" + el.attr_name)
            .join();
        }
        return "";
      };
    },

    getStatus() {
      return (status) => {
        let item = this.tab.find((el) => el.id === status);
        return item ? item.name : "";
      };
    },
  },

  methods: {},

  filters: {
    priceBeforeZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  padding: 24rpx;
}

.item {
  margin-bottom: 24rpx;
  padding: 30rpx 24rpx;
  border-radius: 20rpx;
  background: #ffffff;
}

.itemCon {
  display: flex;

  .img {
    margin-right: 20rpx;
    width: 160rpx;
    height: 160rpx;
    background: #f2f2f2;
    border-radius: 10rpx;
  }

  .txt {
    flex: 1;
    overflow: hidden;
  }
}

.price {
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  font-weight: bold;
  color: #262626;

  text:nth-child(2) {
    font-size: 32rpx;
  }
}

.title {
  margin-right: 10rpx;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  font-size: 28rpx;
  line-height: 34rpx;
  max-height: 68rpx;
  font-weight: bold;
}

.txtHd {
  display: flex;

  .rig {
    text-align: right;
  }
}

.num,
.attr {
  font-size: 24rpx;
  color: #8c8c8c;
}

.itemFd {
  display: flex;
  align-items: center;
  padding-top: 22rpx;

  .status {
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    color: #f0250e;

    &.disabled {
      color: #8c8c8c;
    }
  }

  .btn {
    view {
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 56rpx;
      border: 2rpx solid #f60313;
      border-radius: 32px;
      font-size: 26rpx;
      color: #f0250e;
    }
  }
}
</style>
